<template>
	<view>
		<view class="canvas">
			<canvas style="width: 280px; height:400px;box-shadow: 0px 3px 3px 5px rgba(206, 158, 106, 0.46);" canvas-id="npShareCanvas" @click="saveCans()"></canvas>
		</view>
		<!-- #ifndef H5 -->
		<view class="bottom">
			<view @click="saveCans()">保存海报</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		name: "npCanvas",
		mixins: [base],
		data() {
			return {
				imageList: [],
				avatar: "/static/images/missing-face.png"
			};
		},
		props: {
			qrcode: {
				type: String,
				default: "",
			}
		},
		provide() {
			return {
				npShareCanvas: this
			}
		},
		created() {
			
		},
		methods: {
			open() {
				let canvasBg = this.globalConfig.haibao;
				uni.showLoading({
					title: "正在获取海报"
				});
				
				// #ifdef MP-WEIXIN
				let url = this.$http.config.baseURL + '/api/default/image?url=' + decodeURIComponent(canvasBg);
				url = url + '&platform=wechat&appid=' + uni.getAccountInfoSync().miniProgram.appId;
				uni.downloadFile({
					url: url,
					success: (res) => {
						uni.hideLoading();
						this.selseimg(res.tempFilePath);
					},
					fail: () => {
						uni.hideLoading();
						this.$config.toast('获取海报失败');
					}
				});
				// #endif
				
				// #ifdef H5
				uni.downloadFile({
					url: canvasBg,
					success: (res) => {
						uni.hideLoading();
						this.selseimg(res.tempFilePath);
					},
					fail: () => {
						uni.hideLoading();
						this.$config.toast('获取海报失败');
					}
				});
				// #endif
			},
			selseimg(e) {
				uni.showLoading({
					title: '生成海报中'
				});
				const context = uni.createCanvasContext('npShareCanvas', this)

				context.drawImage(e, 0, 0, 280, 400)
				context.drawImage(this.qrcode, 115, 300, 56, 56)
				context.save()
				context.draw()

				uni.hideLoading();
			},
			saveCans() {
				uni.showLoading({
					title: '保存海报中'
				});
				// #ifdef H5
				if (this.imageList.length != 0) {
					uni.previewImage({
						current: 0,
						urls: this.imageList
					});
					return;
				}
				// #endif
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 280,
					height: 400,
					destWidth: 560,
					destHeight: 800,
					canvasId: 'npShareCanvas',
					success: (res) => {
						uni.hideLoading()
						// #ifdef H5
						this.imageList.push(res.tempFilePath);
						uni.previewImage({
							current: 0,
							urls: this.imageList
						});
						// #endif
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (red) => {
								uni.showToast({
									title: '保存相册成功'
								});
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {
						
													},
													fail(res) {
														
													}
												})
											}
										}
									})
								}
							}
						});
						// #endif
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
		}
	}
</script>

<style lang="scss">
	.canvas {
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
	}

	.bottom {
		padding: 20upx 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
	}

	.bottom view:first-child {
		padding: 20upx 60upx;
		background: #FF8A00;
		border-radius: 44upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.bottom view:last-child {
		padding: 20upx 60upx;
		background: #FF5256;
		border-radius: 44upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.imglist {
		width: 100%;
		padding: 20upx 0;
		overflow: auto;
		/* background-color: #ffffff; */
	}

	.imglist view {
		display: flex;
		justify-content: space-around;
	}

	.imglist image {
		width: 200upx;
		height: 200upx;
		border-radius: 10upx;
	}
</style>
